﻿<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:MusicZone.Common"
    xmlns:local="using:MusicZone.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <common:KeyToResourceConverter x:Key="KeyToResourceConverter"/>
    
    <DataTemplate x:Key="Top20ItemTemplate">
        <Grid Width="160" Height="490">       
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="85"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="2" BorderThickness="3" BorderBrush="White" >
        		<Image Source="{Binding Image}" Stretch="UniformToFill"/>
        	</Border>
        	<Grid Grid.Row="1">
        		<Image Source="/Assets/HubPage/Top20InnerShade.png" Stretch="Fill" Opacity="0.4" Margin="3,0,3,3"/>
        		<StackPanel VerticalAlignment="Center" Margin="10,0">
        			<TextBlock FontSize="18" Text="{Binding Title}" Foreground="White" FontWeight="Light" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Subtitle}" Foreground="#FFecff15" FontWeight="Bold" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Description}" Foreground="White" FontFamily="Segoe UI" FontWeight="Light"/>
        		</StackPanel>
        	</Grid>
        	<Button Content="Button" HorizontalAlignment="Center" Height="56" Grid.RowSpan="2" Style="{StaticResource Top20PlayBtnstyle}" VerticalAlignment="Center" Width="56"/>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="FeaturedPlaylistTemplate">
        <Grid Width="310" Height="70">
            <Path Data="M834.75,119.25h238.5l-26.753,57.03H834.75V119.25z" Fill="#FF4f4e4e" IsHitTestVisible="False" Margin="1" Stretch="Fill"/>
            <StackPanel Orientation="Vertical" Margin="8,10" VerticalAlignment="Top" HorizontalAlignment="Left">
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title}" FontFamily="Segoe UI" FontSize="13.333"/>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Subtitle}" Foreground="Black" FontFamily="Segoe UI" FontWeight="Bold" FontSize="13.333"/>
            </StackPanel>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="03:45 " FontFamily="Segoe UI" VerticalAlignment="Bottom" FontSize="13.333" Margin="10,0,0,3"/>
            <Button Content="Button" HorizontalAlignment="Right" Height="52" Margin="0,0,40,0" Style="{StaticResource PlayBtnStyle}" VerticalAlignment="Center" Width="52"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="FeaturedPlaylistBigTemplate">
        <Grid Width="310" Height="80">
            <Path x:Name="PointerOverBorder" Data="M834.75,119.25h238.5l-26.753,57.03H834.75V119.25z" Fill="#FF4f4e4e" IsHitTestVisible="False" Margin="1" Stretch="Fill"/>
            <StackPanel Orientation="Vertical" Margin="8,10" VerticalAlignment="Top" HorizontalAlignment="Left">
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Title}" FontFamily="Segoe UI" FontSize="13.333"/>
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Subtitle}" Foreground="Black" FontFamily="Segoe UI" FontWeight="Bold" FontSize="13.333"/>
            </StackPanel>
            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="03:45 " FontFamily="Segoe UI" VerticalAlignment="Bottom" FontSize="13.333" Margin="10,0,0,3"/>
            <Button Content="Button" HorizontalAlignment="Right" Height="52" Margin="0,0,40,0" Style="{StaticResource PlayBtnStyle}" VerticalAlignment="Center" Width="52"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="ArtistBigTemplate">
        <Grid Width="140" Height="320">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            <Grid Grid.Row="1" Background="Black">
                <TextBlock Text="{Binding Title}" Foreground="#FFecff15" FontSize="12" FontWeight="Bold" Margin="10"/>
            </Grid>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="ArtistSmallTemplate">
        <Grid Width="140" Height="160" Background="Red">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            <Grid Grid.Row="1" Background="Black">
                <TextBlock Text="{Binding Title}" Foreground="#FFecff15" FontSize="12" FontWeight="Bold" Margin="10"/>
            </Grid>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="ArtistMediumTemplate">
        <Grid Width="140" Height="150" Background="DarkKhaki">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="40"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            <Grid Grid.Row="1" Background="Black">
                <TextBlock Text="{Binding Title}" Foreground="#FFecff15" FontSize="12" FontWeight="Bold" Margin="10"/>
            </Grid>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="ArtistMoreTemplate">
        <Grid Width="140" Height="160" Background="Black">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            	<Path Data="M3.35693,4.25498 L3.80811,4.25498 L3.80811,6.46787 L6.01562,6.46787 L6.01562,6.91904 L3.80811,6.91904 L3.80811,9.13193 L3.35693,9.13193 L3.35693,6.91904 L1.14404,6.91904 L1.14404,6.46787 L3.35693,6.46787 z" Fill="White" Height="45" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Width="45" HorizontalAlignment="Center">
            		<Path.RenderTransform>
            			<TransformGroup>
            				<ScaleTransform/>
            				<SkewTransform/>
            				<RotateTransform/>
            				<TranslateTransform/>
            			</TransformGroup>
            		</Path.RenderTransform>
            	</Path>
            	<TextBlock TextWrapping="Wrap" Text="More" HorizontalAlignment="Center" FontWeight="Light" Margin="0,10,0,0" FontFamily="Segoe UI Light" FontSize="40"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="GenresSmallTemplate">
        <Grid Width="90" Height="90" Background="{Binding TileBackground}">
        	<Grid.ColumnDefinitions>
        		<ColumnDefinition Width="10"/>
        		<ColumnDefinition/>
        	</Grid.ColumnDefinitions>
        	<Path Grid.Column="1" Data="M80,0 L80,90 L0,90 z" Fill="{Binding TileForeground}" Stretch="Fill"/>
        	<StackPanel Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6">
        		<TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontFamily="Segoe UI" FontSize="12"/>
        		<TextBlock TextWrapping="Wrap" Text="{Binding Subtitle}" FontFamily="Segoe UI" FontSize="11" FontWeight="Light" Foreground="#FF7E7E7E"/>
        	</StackPanel>
            <Path Grid.Column="1" Width="30" Data="{Binding PathData,Converter={StaticResource KeyToResourceConverter}}" Fill="{Binding PathClr}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="6"/>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="GenresBigTemplate">
        <Grid Width="190" Height="90" Background="{Binding TileBackground}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="28"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Path Grid.Column="1" Data="M80,0 L80,90 L0,90 z" Fill="{Binding TileForeground}" Stretch="Fill"/>
            <StackPanel Grid.ColumnSpan="2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6">
                <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontFamily="Segoe UI" FontSize="12"/>
                <TextBlock TextWrapping="Wrap" Text="{Binding Subtitle}" FontFamily="Segoe UI" FontSize="11" FontWeight="Light" Foreground="#FF7E7E7E"/>
            </StackPanel>
            <Path Grid.Column="1" Height="50" Data="{Binding PathData,Converter={StaticResource KeyToResourceConverter}}" Fill="{Binding PathClr}" Stretch="Uniform" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="6"/>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="AlbumTemplate">
        <Grid Width="240" Height="240">
        	<Grid.ColumnDefinitions>
        		<ColumnDefinition Width="90"/>
        		<ColumnDefinition/>
        	</Grid.ColumnDefinitions>
        	<Image Grid.ColumnSpan="2" Source="{Binding Image}" Stretch="UniformToFill"/>
        	<Path Grid.Column="1" Data="M150,0 L150,240 L0,240 z" Fill="Black" Stretch="Fill" UseLayoutRounding="False"/>
        	<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="5,10">
        		<Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Bottom" Style="{StaticResource Top20PlayBtnstyle}" Width="40" Height="40"/>
        		<TextBlock TextWrapping="Wrap" Text="Blending Notes" FontFamily="Segoe UI" FontWeight="Light" FontSize="14.667" Width="95"/>
        		<TextBlock TextWrapping="Wrap" Text="Various  Artists" FontFamily="Segoe UI" FontWeight="Bold" FontSize="13.333" Foreground="#FFECFF15"/>
        	</StackPanel>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="LastAddedTemplate">
        <Grid Width="150" Height="490" Background="Black">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="90"/>                
            </Grid.RowDefinitions>
            <Image Source="{Binding Image}" Stretch="UniformToFill"/>
            <StackPanel VerticalAlignment="Top" Margin="12" Grid.Row="1">
                <TextBlock Text="{Binding Title}" Foreground="White" FontSize="20" FontWeight="Light"/>
                <TextBlock Text="{Binding Subtitle}" Foreground="#FFecff15" FontSize="14" FontWeight="Bold"/>
            </StackPanel>
            <TextBlock Text="{Binding Description}" Grid.Row="1" VerticalAlignment="Bottom" Margin="12" Foreground="#FFecff15" FontSize="14" FontWeight="Bold"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="LastAddedMoreTemplate">
        <Grid Width="150" Height="490" Background="Black">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                <Path Data="M3.35693,4.25498 L3.80811,4.25498 L3.80811,6.46787 L6.01562,6.46787 L6.01562,6.91904 L3.80811,6.91904 L3.80811,9.13193 L3.35693,9.13193 L3.35693,6.91904 L1.14404,6.91904 L1.14404,6.46787 L3.35693,6.46787 z" Fill="White" Height="45" RenderTransformOrigin="0.5,0.5" Stretch="Fill" UseLayoutRounding="False" Width="45" HorizontalAlignment="Center">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <TextBlock TextWrapping="Wrap" Text="More" HorizontalAlignment="Center" FontWeight="Light" Margin="0,10,0,0" FontFamily="Segoe UI Light" FontSize="40"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    
    <DataTemplate x:Key="HeaderTemplate">        
        <Grid Width="185" Height="370" Background="Black" Margin="4,0">
        	<Grid RenderTransformOrigin="0.5,0.5" Background="#FF2D2D2D" Margin="-3,0">
        		<Grid.RenderTransform>
        			<CompositeTransform Rotation="{Binding BackRot}"/>
        		</Grid.RenderTransform>        		
        		<Path Data="M185,0 L185,370 L0,370 z" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Grid.Column="1" Fill="#FF2D2D2D">
        			<Path.RenderTransform>
        				<CompositeTransform Rotation="180"/>
        			</Path.RenderTransform>
        		</Path>
        		<Path Data="M185,0 L185,370 L0,370 L131.5,0 z" Stretch="Fill" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5" Fill="Black"/>
        	</Grid>
            <StackPanel Margin="12" HorizontalAlignment="{Binding HAlingn}" VerticalAlignment="{Binding VAlign}">
                    <TextBlock TextWrapping="Wrap" Text="{Binding Title}" TextAlignment="{Binding HAlingn}" FontSize="20" Width="80" FontFamily="Segoe UI" Margin="0,5"/>
                    <Path Data="{Binding PathData,Converter={StaticResource KeyToResourceConverter}}" Fill="#FF848484" HorizontalAlignment="{Binding HAlingn}" Height="50" Stretch="Uniform" UseLayoutRounding="False"/>
        	</StackPanel>            
        </Grid>
        
    </DataTemplate>

    <DataTemplate x:Key="Top20BigItemTemplate">
        <Grid Width="240" Height="490">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="85"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="2" BorderBrush="White" BorderThickness="3" >
        		<Image Source="{Binding Image}" Stretch="UniformToFill"/>
        	</Border>
        	<Grid Grid.Row="1">
        		<Image Source="/Assets/HubPage/Top20InnerShade.png" Opacity="0.8" Stretch="Fill" Margin="3"/>
        		<StackPanel VerticalAlignment="Center" Margin="10,0">
        			<TextBlock FontSize="18" Text="{Binding Title}" Foreground="White" FontWeight="Light" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Subtitle}" Foreground="#FFecff15" FontWeight="Bold" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Description}" Foreground="White" FontFamily="Segoe UI" FontWeight="Light"/>
        		</StackPanel>
        	</Grid>
        	<Button Content="Button" HorizontalAlignment="Center" Height="56" Grid.RowSpan="2" Style="{StaticResource Top20PlayBtnstyle}" VerticalAlignment="Center" Width="56"/>
        </Grid>
    </DataTemplate>

    <DataTemplate x:Key="Top20SmallItemTemplate">
        <Grid Width="240" Height="240">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="85"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="2" BorderBrush="White" BorderThickness="3" >
        		<Image Source="{Binding Image}" Stretch="UniformToFill"/>
        	</Border>
        	<Grid Grid.Row="1">
        		<Image Source="/Assets/HubPage/Top20InnerShade.png" Stretch="Fill" Opacity="0.8" Margin="3"/>
        		<StackPanel VerticalAlignment="Center" Margin="10,0">
        			<TextBlock FontSize="18" Text="{Binding Title}" Foreground="White" FontWeight="Light" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Subtitle}" Foreground="#FFecff15" FontWeight="Bold" FontFamily="Segoe UI"/>
        			<TextBlock FontSize="12" Text="{Binding Description}" Foreground="White" FontFamily="Segoe UI" FontWeight="Light"/>
        		</StackPanel>
        	</Grid>
        	<Button Content="Button" HorizontalAlignment="Center" Height="56" Grid.RowSpan="2" Style="{StaticResource Top20PlayBtnstyle}" VerticalAlignment="Center" Width="56"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="PlaylistDataTemplate">
    	<Grid Margin="6" Width="336" Height="64">
    		<Grid.RowDefinitions>
    			<RowDefinition Height="1.5*"/>
    			<RowDefinition/>
    		</Grid.RowDefinitions>
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="25"/>
    			<ColumnDefinition Width="1.5*"/>
    			<ColumnDefinition/>    			
    		</Grid.ColumnDefinitions>
    		<Rectangle Grid.ColumnSpan="3" Fill="#66BDCC11" Height="1" VerticalAlignment="Bottom" Grid.Row="1"/>
    		<StackPanel Grid.Column="1" Orientation="Vertical">
    			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Lorem Ipsum" VerticalAlignment="Top" Foreground="#E53F3E3E" FontSize="12" FontFamily="Segoe UI"/>
    			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Lorem Ipsum Dolor Sit" VerticalAlignment="Top" Foreground="#E53F3E3E" FontSize="12" FontFamily="Segoe UI"/>
    		</StackPanel>
    		<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="08:45" VerticalAlignment="Center" Foreground="#7FFFFFFF" FontSize="12" FontFamily="Segoe UI" Grid.Row="1" Grid.Column="1"/>
    		<StackPanel Grid.Column="2" Orientation="Horizontal" Grid.RowSpan="2" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5">   				
    			
    			<CheckBox Content="CheckBox" Height="18" Style="{StaticResource LikeChkBoxStyle}" Width="20"/>   				
    			
    			<Button Content="Button" Height="18" Margin="5,0" Style="{StaticResource ShareBtnStyle}"/>
    			<CheckBox Content="CheckBox" HorizontalAlignment="Left" Height="18" Margin="5,0" Style="{StaticResource ListChckBoxStyle}" VerticalAlignment="Top" Width="18"/>   				
    			
    		</StackPanel>
    	</Grid>
    </DataTemplate>


    <DataTemplate x:Key="ArtistItemTemplate">
        <Grid Width="240" Height="{Binding ItemH}">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="45"/>
            </Grid.RowDefinitions>
            <Border Grid.RowSpan="2" BorderThickness="3" BorderBrush="White" >
        		<Image Source="{Binding Image}" Stretch="UniformToFill"/>
        	</Border>
        	<Grid Grid.Row="1">
        		<Image Source="/Assets/HubPage/Top20InnerShade.png"  Stretch="Fill" Margin="3"/>
        		<TextBlock FontSize="13" Text="{Binding Subtitle}" Foreground="#FFecff15" FontWeight="Bold" FontFamily="Segoe UI" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10"/>
        	</Grid>
        </Grid>
    </DataTemplate>

    


</ResourceDictionary>
